<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>7.事件引入</title>
</head>

<body>
    <!-- js事件引入，把时间在在行内进行引入 -->
    <!-- onmouseover="show(this)" 点击触发条件 传参一般用this或者event -->
    <div class="box" onclick="alert('点击了')" onmouseover="show(this)">干撒得分啊打发法</div>

    <div class="box2" onclick="alert('点击了')" onmouseover="show(this)">服务热伤风过热个和认同感</div>
</body>
<script>

    function show(event) {
        console.log('fasfaefawdfdasfeasd' + event.innerText)
    }
    var box = document.getElementsByClassName('box')[0]
    var box2 = document.getElementsByClassName('box2')[0]
    console.log(box);
    console.dir(box);
    //通过onclick属性绑定事件后面新定义的会覆盖前面的
    box.onclick = function () {
        console.log('点击了div class="box"')
    }
    box.onclick = function () {
        console.log('点击了div class="box2"')
    }
    box2.addEventListener('click', function (e) {
        console.log('事件1')
    })
    box2.addEventListener('click', function (e) {
        console.log('事件2')
    })

    //标准浏览器方法.解决浏览器兼容问题
    function addMyEvent(e, type, func) {
        //标准浏览器方法
        if (e.addEventListener) {
            console.log('标准addMyEvent')
            e.addEventListener(type, func)
            //IE浏览器方法
        }
        if (e.attachEvent) {
            console.log('IEaddMyEvent')
            e.addEventListener(type, func)
            //剩余浏览器方法
        }
        if (e.addMyEvent) {
            console.log('剩余浏览器addMyEvent')
            e.addEventListener(type, func)
        }
    }
    //自定义函数添加事件
    addMyEvent(box2, 'click', function (e) {
        console.log('事件3')
    })
</script>

</html>